<template>
  <BaseInsideDrawer :modal="false" v-model="isShow" width="20%">
    <div class="w-full h-full bg-white border border-gray-200 border-solid">
      <Component
        :is="panel"
        ref="componentRef"
      >
      </Component>
    </div>
  </BaseInsideDrawer>
</template>

<script setup lang="ts">
import { nextTick, ref, shallowRef } from 'vue'
import BaseInsideDrawer from '../../BaseInsideDrawer/index.vue'
const panel = shallowRef()
const isShow = ref(false)
const componentRef = ref()
const init = (businessObjectValue: any, panelValue: any, callbackValue: Function) => {
  panel.value = panelValue
  isShow.value = true
  nextTick(() => {
    componentRef.value.renderPanel(businessObjectValue, callbackValue)
  })
}
const close = () => {
  isShow.value = false
}

defineExpose({ init, close })
</script>

<style scoped>

</style>
